@extends('backend.layouts.page')
@section('content')
    <form class="form-horizontal ajaxForm" id="moduleCreate" action="{{url($baseRoute.'save')}}" v-on:submit.prevent="saveData">
        <div class="form-group">
            <label class="col-xs-3 control-label required">父级模块</label>
            <div class="col-xs-9">
                <select name="pid" v-on:change="pidChange" class="form-control">
                    <option value="0">一级模块</option>
                    @foreach($top as $item)
                        <option value="{{$item->id}}">{{$item->name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="form-group" v-show="controller">
            <label class="col-xs-3 control-label required">控制器</label>
            <div class="col-xs-9">
                <select name="tag" v-on:change="tagChange" ref="tag" class="form-control">
                    @foreach($tags->data as $item)
                        <option value="{{$item}}">{{$item}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-3 control-label required">模块名称</label>
            <div class="col-xs-9">
                <input type="text" name="name" placeholder="请输入模块名称" class="form-control">
            </div>
        </div>
        <div class="form-group" v-show="controller">
            <label class="col-xs-3 control-label required">URL</label>
            <div class="col-xs-9">
                <input type="text" name="url" placeholder="请输入URL" class="form-control">
            </div>
        </div>
        <div class="form-group " v-show="topMenu">
            <label class="col-xs-3 control-label required">图标</label>
            <div class="col-xs-6">
                <input type="text" name="input_tag" placeholder="请输入图标" class="form-control">
            </div>
            <div class="col-xs-3 p-t-10">
                <a href="{{url('admin/public/icon')}}" target="_blank">系统图标库</a>
            </div>
        </div>
        <div class="form-group" v-show="topMenu">
            <label class="col-xs-3 control-label required">排序</label>
            <div class="col-xs-9">
                <input type="text" name="sort" placeholder="请输入排序" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-3 control-label required">隐藏</label>
            <div class="col-xs-9">
                <label class="lyear-radio radio-inline radio-primary">
                    <input type="radio" name="hide" value="1"><span>是</span>
                </label>
                <label class="lyear-radio radio-inline radio-primary">
                    <input type="radio" name="hide" value="0" checked><span>否</span>
                </label>
            </div>
        </div>
        <div class="form-group" v-show="controller">
            <label class="col-xs-3 control-label required">操作列表</label>
            <div class="col-xs-9">
                <div class="table-responsive card">
                    <table class="table">
                        <thead>
                        <th>编码</th>
                        <th>名称</th>
                        <th>操作</th>
                        </thead>
                        <tbody id="action_body">
                        <tr v-for="(d,index) in items">
                            <th>@{{d.code}}
                                <input type="hidden" name="actions[code][]" :value="d.code"/>
                            </th>
                            <th>
                                <input type="text" placeholder="动作名称" name="actions[name][]" :value="d.name"
                                       class="form-control input-sm">
                            </th>
                            <th>
                                <a class="btn btn-xs btn-default"
                                   href='javascript:;'
                                   v-on:click="deleteAction(index)"
                                   title="删除"
                                   data-toggle="tooltip"><i
                                        class="mdi mdi-delete"></i></a>
                            </th>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-9 col-xs-offset-3">
                <button class="btn btn-primary" type="submit">立即提交</button>
            </div>
        </div>
    </form>
@stop
@push('scripts')

    <script type="application/javascript">
        var app = new Vue({
            el: '#moduleCreate',
            data: {
                controller: false,
                topMenu: true,
                items: []
            },
            mounted() {
                this.loadActions(this.$refs.tag);
            },
            methods: {
                saveData(e){
                    systemUtil.ajax(e.target.action).setData(new FormData(e.target)).send().then(function (res) {
                        setTimeout(function () {
                            parent.location.reload();
                        }, 2000);
                        return res;
                    }).showMsg(true);
                    return false;
                },

                deleteAction: function (index) {
                    this.items.splice(index, 1);
                },
                pidChange: function (data) {
                    var pid = data.target.value;
                    console.log('pidChange', pid);
                    this.controller = pid > 0;
                    this.topMenu = pid == 0;
                },
                tagChange: function (data) {
                    this.loadActions(data.target);
                },
                loadActions: function (target) {
                    console.log(target.value);
                    var that = this;
                    systemUtil.ajax("{{url('admin/module/actions')}}", "GET")
                        .setParams({name: target.value}).send()
                        .then(function (res) {
                            that.items = res.data;
                        }).showMsg();
                }
            },
        });

    </script>
@endpush
